<template>
  <div class="app-container">
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
      style="margin-bottom: 10px"
      >新增</el-button
    >
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户ID">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-button type="warnig" style="margin-bottom: 10px">批量删除</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="userid" label="序号" width="180">
      </el-table-column>
      <el-table-column
      prop="userName"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sno"
      label="学号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="180">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新日期"
      width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(1)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="用户ID">
          <el-input v-model="form1.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form1.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken, setToken, removeToken } from "@/utils/auth";
import gett from "@/api/userManager";
import userApi from "@/api/userManager";
export default {
  name: "User",
  data() {
    return {
      // form: [],
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        num: "",
        name: "",
        email: "",
      },
      form1: {
        num: "",
        name: "",
        email: "",
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible1 = true;
      this.form1.num = row.num;
      this.form1.name = row.name;
      this.form1.email = row.email;
    },
    handleDelete(id) {
      gett.delUser({token: getToken(), userId: id}).then( response =>{
        console.log('333')
        resolve();
      location.reload()
      }
      )
    },
    getUserList(data) {
      const { token, pageNo, pageSize } = data;
      console.log(1);
      gett.getUserList({ token: getToken(), pageNo: pageNo, pageSize: pageSize }).then(reponse => {
        console.log(2);
        this.tableData = reponse.data.rows;
        resolve();
      })

      
    },
  },
  
  created() {
    console.log("created");
    this.getUserList({ Token: getToken(), pageNo: 1, pageSize: 8 });
  },
};
</script>
<style scoped>
</style>
